<div class="panel panel-primary">
  <div class="panel-heading">
    {{pageTitle}}
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-2">Filter by:</div>
      <div class="col-md-4">
        <!-- <input type="text" [(ngModel)]="listFilter" -->
        <input type="text" [ngModel]="listFilter" (ngModelChange)="onChange($event)">
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h3>Filtered by: {{listFilter}} </h3>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table" *ngIf="products && products.length">
        <thead>
          <tr>
            <th>
              <button class="btn btn-primary" (click)="toggleImage()">
                {{showImage ? 'Hide' : 'Show'}} Image
              </button>
            </th>
            <th>Product</th>
            <th>Code</th>
            <th>Available</th>
            <th>Price</th>
            <th>5 Star Rating</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let product of filteredProducts">
            <td>
              <img *ngIf="showImage" [src]="product.imageUrl" [title]="product.productName" [style.width.px]="imageWidth"
                [style.margin.px]="imageMargin">
            </td>
            <td>
              <a [routerLink]="['/products', product.id]"
                [queryParams]="{ filterBy: listFilter, showImage: showImage }">
                {{ product.productName }}
              </a>
            </td>
            <td>{{ product.productCode | lowercase | convertToSpaces: "-" }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price | currency:"USD":true:"1.2-2"}}</td>
            <td>
              <!-- child component needs rating prop @Input, ratingClicked emitter @Output -->
              <app-star [rating]="product.starRating" (ratingClicked)="onRatingClicked($event)">
              </app-star>
            </td>
            <td>
              <a class="btn btn-primary" [routerLink]="['/products', product.id, 'edit']">
                Edit
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div *ngIf="errorMessage" class="alert alert-danger">
  Error: {{ errorMessage }}
</div>
